<template>
  <span style="position: relative">
    <input ref="input" class="my-input" :value="value" @input="inputEvent" />
    <span class="delete-icon" v-show="clearable && value !==''" @click="closeEvent">
      <div class="iconfont icon-closel" />
    </span>
  </span>
</template>

<script>
export default {
  name: "MyInput",
  props: {
    value: String,
    clearable: Boolean
  },
  data() {
    return {};
  },
  methods: {
    inputEvent(event) {
      this.$emit("input", event.target.value);
    },
    closeEvent(event) {
      this.$emit("input", "");
      this.$refs.input.focus();
    }
  }
};
</script>

<style scoped>
.my-input {
  width: 200px;
  height: 40px;
  outline: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px;
  font-size: 14px;
}
.my-input:focus {
  border: 1px solid #409eff;
}
.delete-icon {
  position: absolute;
  right: 10px;
  color: #999;
  cursor: pointer;
  top: 70%;
  margin-top: -10.5px;
}
.delete-icon:hover {
  color: #333;
}
</style>